import 'dart:io';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animations Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Animations Flutter'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double _duration = 1;
  bool _isLarge = false;

  void _setDuration(double duration) {
    setState(() {
      _duration = duration;
    });
  }

  void _flipSize() {
    setState(() {
      _isLarge = !_isLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
            padding: const EdgeInsets.all(24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const Spacer(flex: 1),
                GestureDetector(
                  onTap: () {
                    _flipSize();
                  },
                  child: AnimatedContainer(
                      height: _isLarge ? 100 : 300,
                      alignment: Alignment.center,
                      duration:
                          Duration(milliseconds: (_duration * 1000).round()),
                      decoration: const BoxDecoration(
                        color: Colors.purple,
                      ),
                      child: const Text("Press Here",
                          style: TextStyle(
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                              color: Colors.white))),
                ),
                Container(
                  padding: const EdgeInsets.only(top: 24),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text('Duration (${_duration.toStringAsFixed(2)})'),
                      Slider(
                          value: _duration,
                          onChanged: _setDuration,
                          min: 0.2,
                          max: 4),
                    ],
                  ),
                ),
                const Spacer(flex: 1)
              ],
            )),
      ),
      floatingActionButton: TextButton(
          onPressed: () {
            sleep(const Duration(milliseconds: 2000));
          },
          style: const ButtonStyle(
              backgroundColor: MaterialStatePropertyAll<Color>(Colors.blue)),
          child: const Text(
            "Freeze Main Thread",
            style: TextStyle(fontSize: 18, color: Colors.white),
          )),
    );
  }
}
